<template>
  <s-layout title="">
    <view class="wrapepr">
			<view class="switch-page-title">轻触头像以切换账号</view>
			<view class="account-content">
				<view class="account-list">
					<view v-for="(item,index) in 10" :key="index" class="account-item account-btn">
						<view class="account-info">
							<img class="account-img" src="../../assets/logo.png" /></img>
							<view class="account-name">
								176****5000t45466364553455
							</view>
						</view>
						<view class="prompt">当前登录</view>
					</view>
				</view>
				<view class="account-btn">
					添加账号
				</view>
			</view>
			<view class="switch-page-foot">删除此设备上的账号记录</view>
    </view>
  </s-layout>
</template>
<script setup>
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import MyBtn from '@/pages/components/my-btn.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';

</script>

<style scoped lang="scss">
  .wrapepr {
    margin-top: 100rpx;
    padding: 0 30rpx;
  }
  .switch-page-title {
	font-size: 48rpx;
	color: #ffffff;
	text-align: center;
	margin: 149rpx 0
  }
	.account-list{
		height: 500rpx;
		overflow: scroll;
	}
	.account-btn{
		height: 145rpx;
		line-height: 145rpx;
		background-color: #1E1E1E;
		border-radius: 72.5rpx;
		margin-bottom: 22rpx;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
	}
	.account-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.account-info{
		display: flex;
		align-items: center;
		margin-left: 31rpx;
		// flex: 1
	}
	.account-img {
		margin-right: 24rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.account-name{
		font-size: 32rpx;
		color: #c3c3c3;
		width: 320rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.account-list .prompt{
		width: 130rpx;
		margin-right: 44rpx;
		font-size: 32rpx;
		color:#13C093;
		text-align: left;
	}
	.switch-page-foot{
		font-size: 30rpx;
		color: #999999;
		text-align: center;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
	}
</style>
